<!--
 * @Description: 
 * @Author: 李成
 * @CreateTime: 2025-02-27 17:40:33
 * @LastEditors: 李成
 * @UpdateTime: 2025-02-27 17:40:33
-->
<template>
  <div class="home">
      这是主应用的home页面
      <div>
        <p>Count: {{ counterStore.count }}</p>
        <p>Double Count: {{ counterStore.doubleCount }}</p>
        <button @click="counterStore.increment">Increment</button>
        <button @click="counterStore.decrement">Decrement</button>
      </div> 
      <div>
        这是主应用显示基座的值：{{JSON.stringify(baseStore)}}
        <button @click="changeBaseStore">改变基座的值</button>
      </div>
      <div>主应用调用add 方法 {{ count }}</div>
      <button @click="addMeth">add</button>
      <router-link to="/">跳转到主框架</router-link>
  </div>
</template>

<script lang='ts' setup>
import { ref, onMounted, nextTick } from "vue"
import { add } from 'base/utils'
import action from "base/action"
import { useCounterStore } from "base/store"
const counterStore = useCounterStore()

const count = ref(0)

const baseStore = ref({})

onMounted(() => {
  console.log('注册全局状态变化监听器') // 调试信息
  action.onGlobalStateChange((state: any, prev:any) => {
     console.log('主应用监听到子应用发来的数据', state, prev)
     baseStore.value = state
  }, true)
})

const changeBaseStore = () => {
  action.setGlobalState({
    baseStore: {name: '李成', age: 18}
  })
}


const addMeth = () => {
  count.value = add(count.value,  5)
}


</script>

<style  scoped>
.home{
    background-color: rgba(0,0,100,.3);
}
</style>